<template>
	<el-button @click="back" type="primary">返回</el-button>
	<div class="chart">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="userName" label="意见人"  />
			<el-table-column prop="wareName" label="商品名称"  />
			<el-table-column prop="ordersId" label="订单号" />
			<el-table-column prop="commentTime" label="反馈时间" />
		</el-table>
		<div class="imgs">
			<p class="content">反馈内容</p>
			<div class="con" v-for="x in tableData" :key="x">
				<span>{{x.commentContent}}</span>
				<p class="feedimg">
					<p class="imgcontainer" v-for="item in Imgsarr">
						<img  :src="baseUrl+item" alt="" />
					</p>
				</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { defineEmits,ref,reactive, defineProps} from 'vue';
	import {detailcomments} from "../api/zhy"
	import {baseUrl} from "../utils/request.ts"
	let emits=defineEmits("goback")
	let props=defineProps(["detailsId"])
	console.log(props.detailsId,"prop")
	let bool=true
	let tableData=ref([])
	let Imgsarr=ref([])
	const back=()=>{
		emits("goback",bool)
	}
	//时间处理
	const times=()=>{
		tableData.value.forEach(v => {
			let str = v.commentTime + ""
			v.commentTime = str.substring(0, 10)
		})
	}
	const moredetailinfos=async()=>{
		let res=await detailcomments({
			commentId:props.detailsId+"",
		})
		console.log(res,"详情")
		tableData.value=res.comment
		Imgsarr.value=res.commentImgs
		console.log(Imgsarr.value,"Imgsarr.value")
		times()
	}
	moredetailinfos()
</script>

<style scoped lang="less">
	.chart{
		margin-top: 30px;
	}
	:deep(.el-table tr){
		height:70px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
		color:#000;
		font-weight: 550;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-header-text-color:#000 !important;
	}
	:deep(.el-table thead tr th){
		background-color:none !important;
		font-size: 18px;
	}
	.imgs{
		margin: 30px auto;
		width: 100%;
	}
	.content{
		font-size: 18px;
		font-weight: 550;
	}
	.con{
		margin-top: 15px;
		padding-left: 15px;
		width:90%;
		height: 210px;
		border: 2px solid #ccc;
		border-radius: 5px;
	}
	span{
		display: inline-block;
		font-size: 18px;
		margin-top:10px;
	}
	.feedimg{
		margin-top:10px;
		width: 100%;
		height: 150px;
		display: flex;
		align-items: center;
	}
	.imgcontainer{
		height:150px;
		width: 120px;
		object-fit: cover;
		margin-right:30px;
	}
	img{
		height:150px;
		width: 120px;
		
	}
</style>